<template>
  <div>
    <div class="page-header">
      <h2>业务管理</h2>
      <div>
        <button class="btn" @click="openAdd">新增业务</button>
        <button class="btn">导入</button>
        <button class="btn">导出</button>
        <input v-model="search" placeholder="搜索业务" class="search-input" />
      </div>
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>业务名称</th>
          <th>业务类型</th>
          <th>客户名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredList" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.customer }}</td>
          <td>
            <button class="btn" @click="edit(item)">编辑</button>
            <button class="btn" @click="remove(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="showAdd" class="modal">
      <div class="modal-content">
        <h3>{{ editId ? '编辑业务' : '新增业务' }}</h3>
        <input v-model="form.name" placeholder="业务名称" />
        <input v-model="form.type" placeholder="业务类型" />
        <input v-model="form.customer" placeholder="客户名称" />
        <div class="modal-actions">
          <button class="btn" @click="save">保存</button>
          <button class="btn" @click="close">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const list = ref([
  { id: 1, name: '网站建设', type: '开发服务', customer: '张三' },
  { id: 2, name: '系统维护', type: '运维服务', customer: '李四' }
])
const search = ref('')
const showAdd = ref(false)
const editId = ref(null)
const form = ref({ name: '', type: '', customer: '' })

const filteredList = computed(() =>
  list.value.filter(item =>
    item.name.includes(search.value) ||
    item.type.includes(search.value) ||
    item.customer.includes(search.value)
  )
)

function openAdd() {
  editId.value = null
  form.value = { name: '', type: '', customer: '' }
  showAdd.value = true
}
function edit(item) {
  editId.value = item.id
  form.value = { ...item }
  showAdd.value = true
}
function remove(id) {
  list.value = list.value.filter(item => item.id !== id)
}
function save() {
  if (editId.value) {
    const idx = list.value.findIndex(i => i.id === editId.value)
    list.value[idx] = { ...form.value, id: editId.value }
  } else {
    list.value.push({ ...form.value, id: Date.now() })
  }
  close()
}
function close() {
  showAdd.value = false
  editId.value = null
  form.value = { name: '', type: '', customer: '' }
}
</script>

<style scoped>
@import '../assets/style.css';
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; }
.data-table th, .data-table td { border: 1px solid #eee; padding: 8px; }
.btn { background: #16a085; color: #fff; border: none; padding: 6px 16px; border-radius: 4px; cursor: pointer; margin-right: 8px; }
.search-input { padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px;margin-top: 8px;  }
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.modal-content { background: #fff; padding: 24px; border-radius: 8px; min-width: 300px; }
.modal-actions { margin-top: 16px; display: flex; gap: 12px; }
</style>